<script setup>
import { ref, computed } from 'vue'
const name = ref('zhang')
const ming = ref('san')
const mingzi = computed({
  get() {
    // 渲染mingzi的时候直接执行get里的内容
    return name.value.slice(0, 1).toUpperCase() + name.value.slice(1) + ' ' + ming.value
  },

  set(val) {
    const [str1, str2] = val.split(' ')
    // 引起调用后需要重新给ref中name和ming赋值页面才会修改
    name.value = str1
    ming.value = str2
  }
})
// 这个函数引起set调用，实际没干任何事
function nanem() {
  mingzi.value = 'li si'
}
</script>

<template>
  <div>
    姓：<input type="text" v-model="name" /><br />
    名：<input type="text" v-model="ming" /><br />
    <span>{{ mingzi }}</span
    ><br />
    <button @click="nanem">获取姓名</button>
  </div>
</template> 

